<%--
  Created by IntelliJ IDEA.
  User: Dave
  Date: Feb 4, 2010
  Time: 10:49:13 PM
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head><title>Simple GSP page</title>
  <meta name="layout" content="main"/>
  <title>Map for ${city.cityName}, ${city.state.stateAbbrev}</title>

  <script type="text/javascript">

    (function($) {
      $(window).unload(function () {
        GUnload();
      });

    })(jQuery);


  </script>


  <script type="text/javascript">


    google.load("maps", "2.x");
    google.setOnLoadCallback(initialize);


    function initialize() {
      var map = new google.maps.Map2(document.getElementById("map"));
      map.setCenter(new GLatLng(${city.latitude}, ${city.longitude}), 6);
      map.setUIToDefault();
    }
  </script>

</head>
<body>
<div id="state-wrapper">
  <g:include controller="state" action="list" params="[stateId:stateId]"/>
</div>
<div id="main-content">
  <div id="page-info">
    <g:link controller="state" action="listCities" id="${stateId}"
            params="${[
          stateId:params.stateId,searchText:params.searchText,
          max:params.max, sort:params.sort, order:params.order, offset:params.offset]}">
      <g:if test="${params.stateId && !params.searchText}">Back to ${city.state.stateName}</g:if>
      <g:else>Back to search</g:else>

    </g:link>

    <div id="city-wrapper">
      <h2>${city.cityName}, ${city.state.stateAbbrev}</h2>
      <div class="form-row"><label>Latitude</label>
        <span id="city-latitude">${city.latitude}</span>
      </div>
      <div class="form-row"><label>Longitude</label>
        <span id="city-longitude">${city.longitude}</span>
      </div>
    </div>
  </div>
  <div id="map-wrapper">

    <div id="map">
      <img src="http://maps.google.com/maps/api/staticmap?center=${city.latitude},${city.longitude}
      &zoom=7&markers=${city.latitude},${city.longitude}
      &size=500x300&key=ABQIAAAAiVvLfVjjB1KmQhUm1SwcpBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQQKUpurwoNEcA7_Vi5pMFL-IGerw&sensor=false"/>
    </div>
  </div>

</div>
</body>
</html>